<script setup>
import {ref} from "vue";
import axios from "axios";
import router from "@/router";
import {ElMessage} from "element-plus";

let inputUsername = ref();
let inputPassword = ref();
let user = ref({
      username: "admin",
      password: "123456"
    }
)
let btnLoginLoading = ref(false);

//例如事件
const login = event => {
  if (user.value.username == undefined || user.value.username == "") {
    inputUsername.value.focus();
    return;
  }
  if (user.value.password == undefined || user.value.password == "") {
    inputPassword.value.focus();
    return;
  }
  btnLoginLoading.value = true;
  //模拟登录接口
  axios.post("/api/login", user.value)
      .then(response => {
        console.log("登录成功",response);
        //保存凭证
        localStorage.setItem("user", user.value.username);
        localStorage.setItem("auth", response.data.value);
        router.replace("/");  //跳转到主页
      })
      .catch(error => {
        console.log("登录失败",error.response);
        ElMessage({
          message: error.response.data.message,
          type: 'warning',
        })
        btnLoginLoading.value = false;
      });

  console.log("axios已发送请求");
}

</script>

<template>
  <div class="loginBody">
    <div class="left">
      <div class="middle">
        <img src="../assets/login-box-bg.svg" width="350"/>
        <div class="logoAndTitle">
          <img src="../assets/logo.png"/>
          藏选APP后台管理系统
        </div>
      </div>
    </div>
    <div class="right">
      <div class="loginPanel">
        <h1>用户登录</h1>
        用户名
        <el-input v-model="user.username"
                  ref="inputUsername"/>
        <br/>
        密码
        <el-input type="password"
                  v-model="user.password"
                  ref="inputPassword"
                  show-password/>
        <br/><br/>
        <el-button type="primary"
                   class="btnLogin"
                   :loading="btnLoginLoading"
                   @click="login">登录
        </el-button>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.loginBody {
  height: 100%;
  display: flex;

  @media screen and (max-width:800px) {
    .left{
      display: none;
    }
  }

  @media screen and (min-width:800px) {
    .left {
      height: 100%;
      display: flex;
      flex: 1;
      flex-direction: column;
      background: #353e54;
      justify-content: center;
      align-items: center;

      .middle {
        text-align: center;
        color: white;
        font-size: 25px;

        .logoAndTitle {
          display: flex;
          align-items: center;
          justify-content: center;

          img {
            width: 40px;
            margin-right: 10px;
          }
        }
      }
    }
  }

  .right {
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .loginPanel {
      width: 400px;
      line-height: 3;
      padding-bottom: 30px;

      h1 {
        text-align: center;
      }

      .el-input {
        height: 40px;
      }

      .btnLogin {
        width: 100%;
        height: 40px;
      }
    }
  }
}
</style>
